import {
  View,
  Text,
  StyleProp,
  ViewStyle,
  StatusBarProps,
  StyleSheet,
  StatusBar,
  Platform,
  StatusBarStyle,
} from 'react-native';
import React, { ReactElement } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';


// 自定义 Hook 获取状态栏高度
export const useStatusBarHeight = () => {
  const insets = useSafeAreaInsets();
  
  // 安卓使用 StatusBar.currentHeight，iOS 使用安全区域顶部高度
  const statusBarHeight = Platform.select({
    android: StatusBar.currentHeight || 0,
    ios: insets.top, // 自动适配刘海屏和非刘海屏
  });
  
  return statusBarHeight;
};

const NAV_BAR_HEIGHT_IOS = 44;//导航栏在iOS中的高度
const NAV_BAR_HEIGHT_ANDROID = 50;//导航栏在Android中的高度
const NAV_BAR_HEIGHT = Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID;
const STATUS_BAR_HEIGHT = (Platform.OS !== 'ios' || useStatusBarHeight()) ? 0 : 20;//状态栏的高度

export const NAVIGATION_BAR_HEIGHT = NAV_BAR_HEIGHT + STATUS_BAR_HEIGHT;

interface StatusBarShape{//设置状态栏所接受的属性
    barStyle?: StatusBarStyle,
    hidden?: boolean,
    backgroundColor?: string,
};
interface NavigationBarProps {
  style: StyleProp<ViewStyle>;
  title: string;
  titleView: React.ReactElement;
  titleLayoutStyle: StyleProp<ViewStyle>;
  hide: boolean;
  statusBar: StatusBarShape;
  rightButton: ReactElement;
  leftButton: ReactElement;
}

// 默认属性
const defaultProps: Partial<NavigationBarProps> = {
  statusBar: {
    barStyle: 'light-content',
    hidden: false,
  },
  hide: false,
};

const NavigationBar = (props: NavigationBarProps) => {
  let statusBar = !props.statusBar.hidden ? (
    <View style={styles.statusBar}>
      <StatusBar {...props.statusBar} />
    </View>
  ) : null;

  let titleView = props.titleView ? (
    props.titleView
  ) : (
    <Text ellipsizeMode="head" numberOfLines={1} style={styles.title}>
      {props.title}
    </Text>
  );

  const getButtonElement = (data: ReactElement) => {
    return <View style={styles.navBarButton}>{data ? data : null}</View>;
  };

  let content = props.hide ? null : (
    <View style={styles.navBar}>
      {getButtonElement(props.leftButton)}
      <View style={[styles.navBarTitleContainer, props.titleLayoutStyle]}>
        {titleView}
      </View>
      {getButtonElement(props.rightButton)}
    </View>
  );

  return (
    <View style={[styles.container, props.style]}>
      {statusBar}
      {content}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
        backgroundColor: '#2196f3'
    },
    navBarButton: {
        alignItems: 'center'
    },
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: NAV_BAR_HEIGHT,
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        right: 40,
        top: 0,
        bottom: 0
    },
    title: {
        fontSize: 20,
        color: 'white',
    },
    statusBar: {
        height: STATUS_BAR_HEIGHT,
    }
});

export default NavigationBar;
